<template>
  <Row>
    <!-- 面包屑 -->
    <Col span="6">
      <Breadcrumb separator=">">
        <BreadcrumbItem
          v-for="item in realList"
          :key="item.path"
          :to="item.path"
        >{{item.meta.title}}</BreadcrumbItem>
      </Breadcrumb>
    </Col>
    <!-- 右侧用户操作栏 -->
    <Col class="nav-tool" span="18" :push="userpush">
      <Row type="flex" justify="end" class="code-row-bg">
        <!-- 个人信息 -->
        <Col class="user" span="4">
          <Dropdown trigger="click" style="margin-left: 20px">
            <a class="fontbold user-info" href="javascript:void(0)">
              <img class="user-info-avator" src="https://vuematerial.io/assets/examples/avatar.png"/> 四大首富
              <Icon type="md-arrow-dropdown" />
            </a>
            <DropdownMenu slot="list">
              <DropdownItem @click.native="getUserInfo">个人资料</DropdownItem>
              <DropdownItem @click.native="exitLogin">退出登录</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </Col>
        <!-- 其他操作 -->
        <Col class="nav-tool-item" span="3" @click.native="goNoticePage"><Icon type="md-notifications-outline" /> 通知</Col>
        <Col class="nav-tool-item" span="3"><Icon type="ios-options" /> 设备调试</Col>
        <Col class="nav-tool-item" span="3" @click.native="setFllscreen"><Icon type="md-expand" /> 全屏</Col>
      </Row>
    </Col>
  </Row>
</template>

<script>
import screenfull from 'screenfull';
import { constants } from 'zlib';
export default {
  data() {
    return {
      realList: [],
      userpush: 0, // 右侧用户模块向右偏移单位数
    }
  },
  watch: {
    $route() {
      // 获取面包屑
      this.getBreadcrumb();
    }
  },
  created(){
    // 路由导航面包屑初始化
    this.getBreadcrumb();   
  },
  methods:{
    // 退出登录
    exitLogin() {
      console.log("退出登录");
    },
    // 个人资料
    getUserInfo() {
      console.log("个人资料");
    },
    // 全屏 / 小屏
    setFllscreen() {
      if (!screenfull.enabled) { // 如果不允许进入全屏，发出不允许提示
		    alert('不支持全屏');
		    return false;
      }		      
      screenfull.toggle();
    },
    // 跳转通知页面
    goNoticePage() {
      this.$router.push({ path: '/notice' })
    },
    // 获取面包屑
    getBreadcrumb() {
      let matched = this.$route.matched.filter(item => item.name);
      this.realList = matched;
      /*
      * 判断面包屑组件是否为空
      * 面包屑组件为空，则设置用户信息模块右移6个单位；
      * 面包屑组件不为空，则设置用户信息模块不向右偏移。
      */
      if (this.realList.length === 0) {
        this.userpush = 6;
      } else {
        this.userpush = 0;
      }
    }
  }
}
</script>
<style lang="less" scoped>
  .nav-tool {
    .user {
      min-width: 150px;
      text-align: right;
      .user-info {
        display: flex;
        align-items: center;
        .user-info-avator {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin-right: 5px;
        }
      }
      .ivu-dropdown-item {
        text-align: center;
      }
    }
  }
  .nav-tool-item {
    color: @black_666_color;
    text-align: center;
    cursor: pointer;
    max-width: 80px;
  }
</style>